<!--
 * @Author: your name
 * @Date: 2020-06-30 11:27:45
 * @LastEditTime: 2020-07-07 15:38:29
 * @LastEditors: Please set LastEditors
 * @Description: 商品sku
 * @FilePath: \JKShopping\jkshopping\src\pages\home\components\goodsDetails\components\sku.vue
--> 
<template>
  <div class="sku">
    <van-popup van-popup v-model="show" closeable position="bottom" :style="{height:'70%' }">
      <h1>加入购物车</h1>
      <van-divider />
      <div class="relation">
        <!-- <div v-for="(items,idx) of datas.attr_relation" :key="idx"> -->
        <div>
          <h2>颜色</h2>

          <div class="attr_name">
            <div
              class="item_attr_name"
              :class="current=== idx ?'attr_name_active':null"
              v-for="(item,idx) of goodsColor.values"
              :key="idx"
              @click="selectSku(idx,item)"
            >{{item.attr_name}}</div>
          </div>
        </div>

        <div>
          <h2>码数</h2>

          <div class="attr_name">
            <div
              class="item_attr_name"
              @click="selectSku2(idx,item)"
              :class="current2=== idx ?'attr_name_active':null"
              v-for="(item,idx) of goodsSize.values"
              :key="idx"
            >{{item.attr_name}}</div>
          </div>
        </div>

        <!-- </div> -->
      </div>
      <!-- 加入购物车按钮 -->
      <div class="shop_box">
        <div class="btn_box">
          <p>{{datas.goods_price | rmb}}</p>
          <p class="vip_price">会员价&nbsp;{{datas.goods_price | rmb}}</p>
        </div>

        <van-button color="#ff4755" square type="primary" @click="addShopcar()">确认加入</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as api from "@/api/apiList/cart/cart.js";
export default {
  props: {
    datas: {
      type: Object,
      required: true,
      default: new Object()
    },
    goodsColor: {
      type: Object,
      required: true,
      default: new Object()
    },
    goodsSize: {
      type: Object,
      required: true,
      default: new Object()
    },
    skuData: {
      //商品所有规格
      type: Array,
      required: true,
      default: new Array()
    }
  },
  data() {
    return {
      show: false,
      current: 0, //默认选择商品
      current2: 0,
      skuOptions: [], ///选中商品颜色
      skuOptions2: [], //选中商品码数
      num: 1 //商品数量
    };
  },

  methods: {
    showsku() {
      //打开sku弹窗
      this.show = true;
    },
    async API_goCart(goods_id, sku_id, goods_number) {//加入到购物车的sku数据
      let data = {
        goods_id,
        sku_id,
        goods_number,
        type: 1
      };
      return await api.goCart(this.qs.stringify(data));
    },
    // closesku() {
      
    //   this.show = false;
    //   this.$toast.success("已加入购物车");
    
    // },
    selectSku(idx, item) {
      this.skuOptions = item.attr_name;
      // console.log(this.goodsColor.values[0]);
      this.current = idx; //选中规格添加格式
    },
    selectSku2(idx, item) {
      this.skuOptions2 = item.attr_name;
      // console.log(this.skuOptions2);
      this.current2 = idx; //选中规格添加格式
    },
    
    async addShopcar() {
      for (let item of this.skuData) {
        if (
          this.skuOptions === item.condition.颜色 &&
          this.skuOptions2 === item.condition.码数
        ) {
          let res = await this.API_goCart(item.shop_goods_id, item.id, 1);
          console.log(res);
        }
         this.show = false;
         this.$notify({ type: 'warning', message: '已加入购物车' })
      }
      let res=await api.cart_count()
      
      let badge = res.data.data.total
      this.$eventBus.$emit("shopbadge",badge)
    }
  },

  created() {
    this.$eventBus.$emit("showsku", this.showsku); //传递sku弹窗方法
   
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/home/sku.scss";
</style>